//1,解决的问题：回调地狱？（嵌套结构）

//回掉地狱的列子：3个ajax；ABC；  A 取回数据之后；才能发起B；B取回数据之后，才能发起C的请求！
//手写一个ajax
function demo1() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "urlA?name=gao");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            //xhr的走到哪一步了？xhr 0-4  4代表xhr 返回了客户端！
            if (xhr.status == 200) {
                // 请求成功的；
                // console.log(xhr.responseText);
                let dataA = xhr.responseText;
                let xhr = new XMLHttpRequest();
                xhr.open("get", "urlB?dataa=" + dataA);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        //xhr的走到哪一步了？xhr 0-4  4代表xhr 返回了客户端！
                        if (xhr.status == 200) {
                            // 请求成功的；
                            // console.log(xhr.responseText);
                            let dataC = xhr.responseText
                            let xhr = new XMLHttpRequest();
                            xhr.open("get", "urlc?datac=" + dataC);
                            xhr.onreadystatechange = function () {
                                if (xhr.readyState == 4) {
                                    //xhr的走到哪一步了？xhr 0-4  4代表xhr 返回了客户端！
                                    if (xhr.status == 200) {
                                        // 请求成功的；
                                        console.log(xhr.responseText);
                                    }
                                }
                            }
                            xhr.send();
                        }
                    }
                }
                xhr.send();
            }
        }
    }
    xhr.send();
}



//get 请求 参数是放在URL ？
//post 请求 参数是放在 send（）；

//2,怎么解决的？(链式结构)
//第一步：把原生的xhr，封装下promise； 管理异步！
function CreateAjax(url) {
    let promise = new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("get", url);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                //xhr的走到哪一步了？xhr 0-4  4代表xhr 返回了客户端！
                if (xhr.status == 200) {
                    // 请求成功的；
                    console.log(xhr.responseText);
                    resolve(xhr.responseText);//让prmise状态变成成功
                } else {
                    reject(xhr.responseText);
                }
            }
        }
        xhr.send();
    })
    return promise;
}

//let pa = CreateAjax("urlA");//p的状态是什么？ 状态永远是pending  不管ajax是获取数据还是没有获取数据！
//语义化更好了


CreateAjax("urlA")
    .then(() => {
        return CreateAjax("urlB")
    })
    .then(() => {
        return CreateAjax("urlC")
    })
    .then(() => {
        CreateAjax("urlD")
    })

//3，状态 3种：开始、成功、失败；
//4， 持久化：

// console.log(1);
// let p = new Promise((resolve, reject) => {
//     console.log(2);
//     setTimeout(() => {
//         console.log(3);
//         resolve("time over")
//     }, 1000)
// })
// console.log(4);
// setTimeout(() => {
//     console.log(5);
//     p.then((data) => {
//         console.log(6);
//         console.log(data);
//     })
// }, 5000)
// console.log(7);

// async await
// 作用：跟promise配合简化代码；并把异步代码的执行顺序，  整理成看起来像同步的样子；保持了一个上下执行顺序，但不是连续的；
async function fn(){  
    let dataA=await CreateAjax("urlA");
    let dataB=await CreateAjax("urlB,,,,dataA");
    let dataC=await CreateAjax("urlC,,,,dataA");
}

console.log(1);
fn()
console.log(3);
//async 是await 下面的代码才开始变成异步；
async function fm(){
    console.log(4);
}

//异步分成两种： 宏任务 微任务；




